<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Books Shop</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/style.less">
        
        <script type="text/javascript" src="js/less.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        
    </head>
    <body>    	
        <div id="wrapper">
        </div>
		<div id="page-content">
    		<header id="header">
    			<div id="search">
					<input id="searchBar" type="text" placeholder="Search here..."/>
					<button id="btnSearch">    					
					</button>
				</div>
    			<div id="logo">    				
    			</div>
    			<div id="cart">
    				<div id="cart-content">Cart: 0</div> 
    			</div>
    			<div id="menu">
    				<ul id="menu-content">
    					<li><a href="index.html">HOME</a></li>
    					<li><a href="category.html">BOOKS</a></li>
    					<li><a href="">ABOUT</a></li>	
    				</ul>
    			</div>
    			<div id="header-line" class="line"></div>
    		</header>	
    		<div id="content-category">
    			<div id="left">
    				<div id="category-title"><h4>Category</h4></div>
    				<div id="category-list">
    					<ul>
    						<li><a href="">Category 1</a></li>
    						<li><a href="">Category 2</a></li>
    						<li><a href="">Category 3</a></li>
    						<li><a href="">Category 4</a></li>
    						<li><a href="">Category 5</a></li>
    					</ul>
    				</div>
    			</div>        			
    			<div id="right">
    				<div id="category-name">Category 1</div>
    				<div id="category-products">    				
	    				<div id="listProducts">
	    					<div id="productItems">
	    						<a class="item" href="#">
	    							<div id="item1" class="item-img">    								
	    							</div>
	    							<div class="item-bot">
	    								<div class="item-name">
	    									Book Title 1
	    								</div>
	    								<div class="item-price">$100</div>
	    							</div>    							
	    						</a>
	    						<a class="item" href="#">
	    							<div id="item2" class="item-img">    								
	    							</div>
	    							<div class="item-bot">
	    								<div class="item-name">
	    									Book Title 1
	    								</div>
	    								<div class="item-price">$100</div>
	    							</div> 
								</a>
	    						<a class="item" href="#">
	    							<div class="item-img">    								
	    							</div>
	    							<div class="item-bot">
	    								<div class="item-name">
	    									Book Title 1
	    								</div>
	    								<div class="item-price">$100</div>
	    							</div> 
								</a>
	    						<a class="item" href="#">
	    							<div class="item-img">    								
	    							</div>
	    							<div class="item-bot">
	    								<div class="item-name">
	    									Book Title 1
	    								</div>
	    								<div class="item-price">$100</div>
	    							</div> 
	    						</a>
	    						<a class="item" href="#">
	    							<div class="item-img">    								
	    							</div>
	    							<div class="item-bot">
	    								<div class="item-name">
	    									Book Title 1
	    								</div>
	    								<div class="item-price">$100</div>
	    							</div> 
	    						</a>
	    						<a class="item" href="#">
	    							<div class="item-img">    								
	    							</div>
	    							<div class="item-bot">
	    								<div class="item-name">
	    									Book Title 1
	    								</div>
	    								<div class="item-price">$100</div>
	    							</div> 
	    						</a>
	    						<a class="item" href="#">
	    							<div class="item-img">    								
	    							</div>
	    							<div class="item-bot">
	    								<div class="item-name">
	    									Book Title 1
	    								</div>
	    								<div class="item-price">$100</div>
	    							</div> 
	    						</a>
	    						<a class="item" href="#">
	    							<div class="item-img">    								
	    							</div>
	    							<div class="item-bot">
	    								<div class="item-name">
	    									Book Title 1
	    								</div>
	    								<div class="item-price">$100</div>
	    							</div> 
	    						</a>
	    						<a class="item" href="#">
	    							<div class="item-img">    								
	    							</div>
	    							<div class="item-bot">
	    								<div class="item-name">
	    									Book Title 1
	    								</div>
	    								<div class="item-price">$100</div>
	    							</div> 
	    						</a>
	    					</div>
	    					<div id="pagingProducts">
	    						
	    					</div>	
	    				</div>
    				</div>
    			</div>
    		</div>
    		<footer>
    			<div class="line"></div>	
    		</footer>
    	</div>
    </body>
</html>
